<template>
    <a-layout class="index-1">
        <!-- style="background: #1C9399; " -->
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible style="background:  #808080; ">
            <div class="index-logo logo">
                <img class="logoImg" src="../../assets/images/b1.webp" alt="">
            </div>
            <!-- 菜单列表 theme="dark" -->
            <a-menu theme="dark" style="font-size: 16px;font-weight: 600; " mode="inline" v-model:selectedKeys="selectedKeys" router>
                <a-sub-menu v-for="(item,index) in menusList" :key="index">
                    <template #title>
                        <span>
                            <component :is="item.icon"/>
                            {{item.name}}
                        </span>
                    </template>
                    <!-- <div class="child-list" v-if="item.children"> -->
                        <a-menu-item  v-for="child in item.children" :key="child.id">
                            <router-link :to="child.path">
                                <component :is="child.icon"/>
                                {{child.name}}
                            </router-link>
                        </a-menu-item>
                    <!-- </div> -->
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0">
                <div class="header-1">
                    <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
                    <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)"/>
                    头部区域

                    <div class="log-out" @click="toLogout">
                        <login-outlined />&emsp13;
                        <span>注销</span>
                    </div>
                    <div class="log-out" @click="toRedirectIndex">
                        <desktop-outlined />&emsp13;
                        <span>首页</span>
                    </div>
                </div>               
            </a-layout-header>
            <a-layout-content :style="{margin: '10px 16px',padding: '10px',background: '#fff',minHeight: '400px'}">
                <router-view/>
            </a-layout-content>
            <a-layout-footer style="text-align: center;vertical-align: middle;height: 20px;">
                网站备案号:鲁ICP备2022022503号-1 ©2018 Created by mis_wu    网站名称:Wu之天星
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>
<script>
import { defineComponent, ref } from "vue";
import { menus } from '@/assets/js/test';
import {$http} from '@/utils/axios';
export default defineComponent({
    setup() {
        return {
            selectedKeys: ref(["1"]),
            collapsed: ref(false),
            menusList:menus
        };
    },
    created(){
        // console.log("菜单：",menus);
    },
    methods:{
        toLogout(){            
            $http.post("/gatewayServer/userServeController/logout").then((result)=>{
                // console.log("退出登录:",result);
            });
            this.$router.push("/");
            this.$message.success("退出成功");
        },
        toRedirectIndex(){
            this.$router.push("/redirectPage");
        }
    }
});
</script>
<style scoped>
  @import url(@/assets/css/indexHello.css);
</style>